<!--
 * @Author: your name
 * @Date: 2020-07-04 10:26:39
 * @LastEditTime: 2021-08-12 20:11:53
 * @LastEditors: Hong Yiqun
 * @Description: In User Settings Edit
 * @FilePath: \framework\src\components\AppAside.vue
-->
<template>
  <el-aside width="200px" class="menu-wrap">
    <div class="systemInfo">
      <img :src="SYSTEM_CONFIG.LOGO_PATH" class="img-responsive logo" alt="" />
      <pre class="systemName" v-html="SYSTEM_CONFIG.DEFAULT_SYSTEM_TITLE"></pre>
    </div>
    <!-- {{authority}} -->
    <div class="menu-container">
      <el-menu
        router
        :default-active="$route.path"
        unique-opened
        text-color="rgba(255, 255, 255, 0.65)"
        active-text-color="rgba(255, 255, 255, 1)"
      >
        <template v-for="item in authority">
          <!-- {{item}} -->
          <el-submenu :index="item.id" :key="item.id" v-if="isSubmenu(item)">
            <template slot="title">
              <!-- <div class="icon-mask"></div> -->
              <div class="icon-wrap" v-if="item.icon">
                <img
                  v-if="item.icon"
                  :src="item.icon"
                  style="max-width: 20px; margin-right: 12px;"
                />
              </div>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="children_item in item.children">
              <!-- {{children_item}} -->
              <!-- :index="children_item.apiUrl" :key="children_item.id"  v-if="isMenuItem(children_item) " -->
              <el-menu-item
                v-if="isMenuItem(children_item)"
                :index="children_item.url"
                :key="children_item.id"
                >{{ children_item.name }}</el-menu-item
              >
              <el-submenu
                :index="children_item.id"
                :key="children_item.id"
                v-if="isSubmenu(children_item)"
              >
                <template slot="title">
                  <span>{{ children_item.name }}</span>
                </template>
                <template v-for="children_item_children in children_item.children">
                  <!-- {{children_item}} -->
                  <!-- :index="children_item.apiUrl" :key="children_item.id"  v-if="isMenuItem(children_item) " -->
                  <el-menu-item
                    v-if="isMenuItem(children_item_children)"
                    :index="children_item_children.url"
                    :key="children_item_children.id"
                    >{{ children_item_children.name }}</el-menu-item
                  >
                </template>
              </el-submenu>
            </template>
          </el-submenu>
          <el-menu-item
            :index="item.url"
            :key="item.id"
            v-if="isMenuItem(item)"
          >
          <!-- <div class="icon-mask"></div> -->
          <div class="icon-wrap" v-if="item.icon">
            <img
              v-if="item.icon"
              :src="item.icon"
              style="max-width: 20px; margin-right: 12px;"
            />
          </div>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <img
      class="aside-icon"
      src="@/assets/theme/aside-icon.png"
      alt=""
      srcset=""
    />
  </el-aside>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import CONFIG from "@/config";
import apis from "@/apis";
// import treeList from "@/treeList";
var _ = require("lodash");
import { get } from "lodash";
import { MenuItem } from 'element-ui'

/**
 * 比如当菜单的路由是 /a 则访问 /a/b 时，菜单为激活态，
 * 关闭时，则为全匹配模式
 */
const ASIDE_ACTIVE_BY_PATH = CONFIG.ASIDE_ACTIVE_BY_PATH || false

let ytElMenuItem = {
  mixins:[MenuItem],
  computed:{
    active() {
      if(ASIDE_ACTIVE_BY_PATH) {
        return (this.$route.path || '').includes(this.index)
      }
      return this.index === this.rootMenu.activeIndex;
    },
  },
}

// 转bool值
function toBool(val) {
  return !!val;
}

/**
 * 权限的对象
 * @typedef {objec} Authority
 * @prop {string} url
 * @prop {string} id
 * @prop {string} isScreen - [deprecated] 是否是菜单，已废弃，请使用 isMenu替代
 * @prop {number} isMenu - 是否是菜单
 * @prop {string} type - [deprecated]
 * @prop {Array<Authority>} children
 * @prop {string} iconPath - [deprecated]
 * @prop {string} icon - 图标
 * @prop {string} name
 * @prop {number} hidden - 是否是隐藏
 */

export default {
  components: {
    'el-menu-item': ytElMenuItem
  },
  data() {
    return {
      drawer: false,
      logoUrl: process.env.VUE_APP_LOGO_BASE_URL,
    };
  },
  computed: {
    ...mapState(["authority", "CONFIG", "userName", "USERID"]),
    SYSTEM_CONFIG() {
      return CONFIG;
    },
  },
  mounted() {
    // this.get_Resource_Tree()
    this.getSysInfo();
  },
  activated() {
    this.getSysInfo();
  },
  methods: {
    ...mapMutations(["setAuthority", "setUserId", "setUserInfo", "setName"]),
    /**
     * @function 获取侧边栏菜单
     */
    get_Resource_Tree() {
      // this.setAuthority(treeList)
      // this.$http.get(`${apis.Resource_Tree}?sysCode=${CONFIG.SYS_CODE}`).then(res => {
      //   if (res.data.code === 200) {
      //     this.setAuthority(res.data.data[0].resourceList)
      //   }
      // })
      // console.log(apis._api_sysmenu_tree_user, 'get_Resource_Tree')
      this.$http
        .post(
          apis._api_sysmenu_tree_user +
            `?userId=${this.USERID}&sysId=${this.SYSTEM_CONFIG.SYSTEM_CODE}&client=${this.SYSTEM_CONFIG.client}`,
          {
            params: {
              userId: this.USERID,
              sysId: this.SYSTEM_CONFIG.SYSTEM_CODE,
              client: this.SYSTEM_CONFIG.client
            },
          }
        )
        .then((res) => {
          // console.log(res, 'res')
          let code = get(res, "data.code");
          if (200 !== code) {
            return;
          }
          let authority = get(res, "data.data");

          this.setAuthority(authority);
        });
    },
    // 查询当前用户信息
    getCurrentUserInfo() {
      return this.$http
        .get(apis._api_sysuser_myInfo, {})
        .then((res) => {
          // console.log(res, 'res1')
          let code = get(res, "data.code");
          if (200 !== code) {
            return;
          }

          let userId = get(res, "data.data.id");
          let name = get(res, "data.data.name");
          this.setUserId(userId);
          this.setName(name);
          this.setUserInfo(res.data.data);
        });
    },

    // 获取菜单是否渲染
    // isMenuRender(menu) {},

    /**
     * 判断是否是子菜单
     * @params {Authority} menu
     */
    isSubmenu(menu) {
      return (
        toBool(menu.isMenu) &&
        menu.children &&
        menu.children.filter((item) => item.isMenu === 1 && item.hidden === 0).length > 0 &&
        !toBool(menu.hidden)
      );
    },

    // 判断是否是菜单项
    isMenuItem(menu) {
      let hasChildren =
        menu.children &&
        menu.children.filter((item) => item.isMenu === 1 && item.hidden === 0).length > 0;
      if (hasChildren) {
        return false;
      }
      return toBool(menu.isMenu) && !toBool(menu.hidden);
    },
    getSysInfo: _.debounce(function() {
      this.getCurrentUserInfo().then(() => {
        this.get_Resource_Tree();
      });
    }, 300),
  },
};
</script>
<style lang="scss" scoped>
.menu-wrap {
  overflow-y: hidden;
  box-shadow: 7px 0px 5px -5px rgba(45, 45, 45, 0.3);
  position: relative;
  background: url('~@/assets/theme/aside-bg.png');
  background-size: 100% 100%;
  .aside-icon {
    position: absolute;
    bottom: 0;
    z-index: 1;
  }
}
.el-aside {
  height: 100vh;
  // background: #fff;
}
.menu-container {
  width: 200px;
  height: calc(100% - 164px);
  overflow-y: auto;
  position: relative;
  z-index: 3;
}
.systemInfo {
  margin: 12px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .logo {
    margin: 20px 10px;
    // max-width: 120px;
    width: 40px;
    height: 40px;
  }
  .systemName {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 16px;
  }
}
</style>
<style lang="scss">
.el-menu {
  border: none !important;
}
// .el-menu-item {
//   &.is-active {
//     .icon-mask {
//       background: #e6f7ff;
//     }
//   }
//   .icon-mask {
//     position: absolute;
//     width: 15px;
//     height: 25px;
//     left: 6px;
//     background: white;
//     z-index: 9;
//   }
// }
.el-submenu__title {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 20px !important;
  margin-right: 0px !important;
  position: relative;
  // .icon-mask {
  //   position: absolute;
  //   width: 15px;
  //   height: 25px;
  //   left: -14px;
  //   background: white;
  //   z-index: 9;
  // }
}
.el-menu,
.el-submenu__title:focus,
.el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: transparent !important;
}
.menu-wrap {
  ::-webkit-scrollbar-track-piece {
    //滚动条凹槽的颜色，还可以设置边框属性
    background-color: rgba(0, 0, 0, 0) !important;
    border-radius: 1000px !important;
  }
  ::-webkit-scrollbar {
    //滚动条的宽度
    width: 5px;
    height: 9px;
    border-radius: 1000px;
    background-color: rgba(0, 0, 0, 0);
  }
  ::-webkit-scrollbar-thumb {
    //滚动条的设置
    background-color: rgba(45, 45, 45, 0.3);
    background-clip: padding-box;
    min-height: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
  }
  .el-menu-item {
    min-width: unset;
    // color: #ffffff !important;
    &.is-active {
      // color: #1890ff !important;
      background-image: linear-gradient(270deg, var( --color-aside-selected-right ) 0%, var( --color-aside-selected-left ) 100%) !important;
    }
  }
}
.icon-wrap{
  width: 14px;
  height: 14px;
  position: relative;
  display: inline-block;
  margin-right: 10px;
  // overflow: hidden;
  img{
    // width: 14px;
    // height: 14px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.65;
  }
}
.is-active{
  .icon-wrap{
    img{
      // filter: drop-shadow(0 0 #ffffff);
      // -webkit-filter: drop-shadow(0 0 #ffffff);
      // position: absolute;
      // top: 0;
      // left: 0;
      opacity: 1;
    }
  }
}
.el-submenu.is-active {
  & > .el-submenu__title span {
    color: rgba(255, 255, 255, 1);
  }
}
</style>
